<template>
	<div class="user-withdraw">
		<div class="com-header">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				{{name}}
			</div>
		</div>
		<div class="uw-total">
			<p>{{list.credit}}</p>
			<span>我的{{name}}余额</span>
		</div>
		<div class="uw-nav">
			<div class="uw-nav-item">
				<p>正在提现({{unit}})</p>
				<span>{{list.credit_withdraw_ing}}</span>
			</div>
			<div class="uw-nav-item">
				<p>可提现({{unit}})</p>
				<span>{{list.credit}}</span>
			</div>
		</div>
		<div class="uw-btn"
			@click="goWithdraw()"
		>
			<p>确认提取</p>
		</div>
		<div class="uw-history">
			<p>提现记录</p>
			<i class="iconfont">&#xe6a7;</i>
		</div>
		<div class="uw-tip">
			注意：{{rate}}{{unit}}=1元，最低提现额度为{{min}}个{{name}}<br/>
			每个月{{time}}日为提现日，其他时间暂不支持提现
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				list: [],
				time: window.localStorage.getItem('withdraw_day'),
				name: window.localStorage.getItem('jifenbao_name'),
				unit: window.localStorage.getItem('unit'),
				min: window.localStorage.getItem('min'),
				rate: window.localStorage.getItem('rate'),
				bei: window.localStorage.getItem('bei')
			}
		},
		mounted(){
			this.getData();
			document.title = this.name;
		},
		methods: {
			goWithdraw: function(){
				this.$router.push({
					path: '/user/withdraw/withdraw',
					query: {
						credit: this.list.credit
					}
				})
			},
			getData(){
				axios.post(Http.BEANSNUM)
				.then( res => {
					var ret = res.data;
					this.list = ret.data;
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-withdraw{
		background: #f5f5f5;
		.uw-total{
			width: 100%;
			height: 2rem;
			padding-top: 1rem;
			color: #fff;
			font-size: 0.44rem;
			font-weight: bold;
			background: url(../assets/img/summary-bg.png) top center no-repeat;
			background-size: 100% 100%;
			p{

			}
			span{
				font-size: 0.24rem;
				font-weight: 100;
			}
		}
		.uw-nav{
			display: flex;
			border-bottom: 0.2rem solid #f5f5f5;
			background: #fff;
			.uw-nav-item{
				flex: 0 0 50%;
				padding: 0.2rem 0;
				&:nth-of-type(1){
					border-right: 0.01rem solid #f5f5f5;
					box-sizing: border-box;
				}
				p{
					margin-bottom: 0.2rem;
				}
			}
		}
		.uw-btn{
			width: 90%;
			padding: 5%;
			background: #fff;
			p{
				color: #333;
				font-size: 0.28rem;
				font-weight: bold;
			}
		}
		.uw-history{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0.24rem;
			margin-top: 0.2rem;
			height: 0.88rem;
			background: #fff;
			i{
				font-size: 0.44rem;
			}
		}
		.uw-tip{
			padding: 0.4rem 0 2rem 0;
		}
	}
</style>